<template>
    <div class="UpdataeCourse_from_box_css">
        <!-- <el-form
            :label-position="labelPosition"
            label-width="100px"
            :model="formLabelAlign"
            style="max-width: 460px;margin-left: 15vw;"
        >
            <el-form-item label="账号电话">
            <el-input v-model="formLabelAlign.name" />
            </el-form-item>
            <el-form-item label="账号密码">
            <el-input type="password" v-model="formLabelAlign.region" />
            </el-form-item>
            <el-form-item label="确认密码">
            <el-input type="password" v-model="formLabelAlign.type" />
            </el-form-item>
            <el-button type="primary" style="width: 28vw;height: 5vh;margin-left: 2vw;" @click="UpdateAdmin">更新信息</el-button>
        </el-form> -->
        <b style="font-size:1.5vw">添加教程信息:</b>
        <div id="UpdataeCourse_from_content_box_css">
            <el-form :label-position="labelPosition" label-width="80px" :model="UpdataeCourseformLabelAlign" style="margin: 2vh auto;width: 100%;height: 90%;">
              <el-form-item label="视频标题">
                <el-input v-model="UpdataeCourseformLabelAlign.courseName"></el-input>
              </el-form-item>
              <el-form-item label="上传人">
                <el-input v-model="UpdataeCourseformLabelAlign.courseUp"></el-input>
              </el-form-item>
              <el-form-item label="视频简介">
                <!-- <el-input v-model="UpdataeCourseformLabelAlign.courseInformation"></el-input> -->
                <input type="text" style="width: 100%;height: 10vh;background-color: #fff;border: 1px solid rgba(0,0,0,.1);border-radius: 5px;" v-model="UpdataeCourseformLabelAlign.courseInformation"/>
              </el-form-item>
              <el-form-item label="视频封面">
                <!-- <el-upload
                  class="avatar-uploader"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload"
                  >
                  <img v-if="false" :src="imageUrl" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload> -->
                <el-input v-model="UpdataeCourseformLabelAlign.courseImage"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button size="small"  type="primary" style="width: 5vw;height: auto;" @click="Updateteachercourse(UpdataeCourseformLabelAlign)">确定上传</el-button>
              </el-form-item>
              <b style="font-size:1.5vw">添加教程视频:</b>
              <el-form-item label="课程名">
                <el-input v-model="UpdataeCourseformLabelAlign.courseId"></el-input>
              </el-form-item>
              <el-form-item label="视频文件">
                <el-upload
                    class="upload-demo"
                    drag
                    :action="updateVideo"
                    multiple
                    style="width:100%"
                    :on-progress="VideofromState"
                    >
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    <div class="el-upload__tip">只能上传mp4文件，且不超过500kb</div>
                    </el-upload>
              </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
    export default {
        name:'UpdataeCourse',
        data(){
            return{
                updateVideo:'http://127.0.0.1/file/uploadVideo',
                UpdataeCourseformLabelAlign:{
                    courseName: '',
                    courseUp: '',
                    courseInformation: '',
                    courseImage:'',
                    courseId:'',
                    VideoName:''
                }
            }
        },
        mounted(){
            this.updateVideo=this.updateVideo+"?username="+this.$store.state.uploadName
            this.UpdataeCourseformLabelAlign.courseId=this.$store.state.uploadName
            console.log(this.updateVideo)
        },
        methods:{
            VideofromState(event, file, fileList){
                if(this.$store.state.uploadName==='未知'&&this.UpdataeCourseformLabelAlign.VideoName===''){
                    file=[]
                    alert("请填写上传视频信息")
                }else{
                    // console.log(this.UpdataeCourseformLabelAlign.courseId)
                    console.log(this.updateVideo)
                }
                // console.log("hello")
                // console.log(this.UpdataeCourseformLabelAlign.courseName)
            },
            Updateteachercourse(UpdataeCourseformLabelAlign){
                var that=this
                axios.get('http://127.0.0.1/uploadCourse',{
                    params:{
                        courseName: UpdataeCourseformLabelAlign.courseName,
                        courseUp: UpdataeCourseformLabelAlign.courseUp,
                        courseInformation: UpdataeCourseformLabelAlign.courseInformation,
                        courseImage:UpdataeCourseformLabelAlign.courseImage
                    }
                })
                .then(function(res){
                    if(res.data==1){
                        alert("上传成功，请添加视频")
                        // that.$router.push('/TeahcerAdmin/Course')
                        that.$store.commit('updateUploadName',UpdataeCourseformLabelAlign.courseName)

                        // console.log(UpdataeCourseformLabelAlign.courseName)
                        // alert(UpdataeCourseformLabelAlign.courseName)
                        // that.$router.push('/TeahcerAdmin/UpdataeCourse')
                        that.$router.go(0)
                        // console.log(that.$router)
                    }else{
                        alert("未找到视频相关信息")
                    }
                })
                .catch(function(error){
                    console.log(error)
                    alert(error)
                })
            }
        }
    }
</script>

<style>
    .UpdataeCourse_from_box_css{
        position: relative;
        width: 98%;
        height: 112%;
        background-color: #fff;
        border: 1px solid rgba(0,0,0,.1);
    }
    #UpdataeCourse_from_content_box_css{
        position: absolute;
        top: 1%;
        left: 2%;
        width: 40%;
        height: 80%;
    }
</style>